<template>
  <div class="system-user-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="540">
      <el-form
        ref="formRef"
        :model="state.ruleForm"
        :rules="state.rules"
        size="default"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="state.ruleForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="小程序用户" prop="uid">
          <CommonSelect
            v-model="state.ruleForm.uid"
            :options="state.weuserList"
            label-key="nick_name"
            value-key="uid"
            filterable
            remote
            reserve-keyword
            remote-show-suffix
            :filter-method="filterMethod"
            popper-class="my-option"
          >
            <template #default="{ item }">
              <div class="flex" style="align-items: center">
                <el-avatar size="small" :src="item.avatar" />
                <span>{{ item.mobile }} | {{ item.nick_name }}</span>
              </div>
            </template>
          </CommonSelect>
        </el-form-item>
        <el-form-item label="开户行" prop="bank_code">
          <CommonSelect
            v-model="state.ruleForm.bank_code"
            :options="BankList"
            filterable
          >
          </CommonSelect>
        </el-form-item>
        <el-form-item label="卡号" prop="bank_account">
          <el-input v-model="state.ruleForm.bank_account" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default" :loading="state.submit.loading"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="distributorDialog">
import { nextTick, reactive, ref } from 'vue';
import { Distributor } from '/@/models';
import { DialogType } from '/@/constants/dialog-type';
import { createDistributor, updateDistributor } from '/@/api/distributor';
import { ElMessage } from 'element-plus';
import { assginDefault } from '/@/utils/assign-default';
import { cloneDeep, get } from 'lodash/fp';
import { readAllWeappUser } from '/@/api/weapp-user';
import CommonSelect from '/@/components/common-select/index.vue';
import { BankList } from '/@/constants/bank';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const formRef = ref();
const state = reactive({
  id: '',
  ruleForm: {
    name: '',
    bank_code: '',
    bank_account: '',
    uid: ''
  },
  rules: {
    name: [{ required: true, message: '不能为空' }]
  },
  weuserList: [],
  allWeuserList: [],
  submit: {
    loading: false
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: ''
  }
});

// 打开弹窗
const openDialog = (type: string, row?: Distributor) => {
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  nextTick(() => {
    if (type === DialogType.EDIT) {
      state.id = row.id;
      assginDefault(state.ruleForm, cloneDeep(row));
      state.dialog.title = '修改渠道商';
    } else {
      state.id = '';
      state.dialog.title = '新增渠道商';
      formRef.value?.resetFields();
    }
  });
  getWeuserList();
};

const filterMethod = (query: string) => {
  if (query !== '') {
    state.weuserList = state.allWeuserList.filter((item) => item.mobile.indexOf(query) > -1);
  }
};

const getWeuserList = async () => {
  const { data } = await readAllWeappUser({ page: 0, pageSize: 100 });
  state.allWeuserList = data.list;
  state.weuserList = state.allWeuserList
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
  closeDialog();
};

// 提交
const onSubmit = async () => {
  await formRef.value.validate();
  try {
    state.submit.loading = true;
    const data = {
      ...state.ruleForm
    };
    if (state.dialog.type === DialogType.EDIT) {
      await updateDistributor(state.id, data);
    } else {
      await createDistributor(data);
    }
    ElMessage.success('保存成功');
    closeDialog();
    emit('refresh');
  } catch (err) {
    console.log(err);
  }

  state.submit.loading = false;
};

// 暴露变量
defineExpose({
  openDialog,
  closeDialog
});
</script>


